<template>
    <div class="home-recommond">
        <div class="wrapper" ref="wrapper">
            <!-- 滚动所需的容器 -->
        <ul class="content">
            <li v-for="(item,index) in listData" :key="index">
                <div class="cover">
                    <van-image :src="item.cover" radius="1rem" />
                    <span>{{item.listen_num }}</span>
                </div>
                <span>{{item.title}}</span>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import BScroll from'better-scroll';//引入betterscroll
export default {
    data(){
        return{
            listData:[]
        }
    },
   created(){
    this.getSongListData()
   },
methods:{
    getSongListData(){
        this.$request('get','/recommend/playlist/u')
    .then(res=>{
        console.log(res)
        if(res.result == 100){
            this.listData = res.data.list;
        }
        //异步数据的一些处理
        this.$nextTick(()=>{
            //wrapper为remplate中容器的ref，表示给那个元素来设置滚动
          this.scroll=new BScroll(this.$refs.wrapper,{
            scrollY: false,//关闭纵向滚动
            scrollX: true,//横向滚动
            startX: 0,//横向滚动的开始位置
          });
        });
      });
    }
  }
}
</script>

<style scoped>
/* .home-recommond>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-recommond>ul>li{
    width: calc((100% - 1rem) / 3 * 1);
}
.home-recommond>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.cover{
    position: relative;
}
.cover>span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: brown;
} */
.cover > span{
    position: absolute;
    right: 0;
    bottom: 0.3rem;
    background-color: red;
}
.cover{
    position: relative;
}
.wrapper {
    width: 100%; /* 容器的宽度就是屏幕的宽度 */
    overflow: hidden;
}
ul.content{
    /* content内容区的宽度要大于wrapper容器的宽度，12个列表项 */
    width: calc(12 * 10rem);
}
ul.content li{
    display: inline-block;
    width: 10rem;
}
ul.content li * {
    margin: 0.1rem;
    color: #54493b;
}
</style>